<template>
  <section>
    <el-form label-width="100px">
      <el-form-item label="产品名称：">
        <el-input size="mini" v-model="product.name" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="产品类型：">
        <el-cascader v-if="categoryList" size="mini" :options="categoryList" change-on-select
                     :props="defaultProps" @change="handleChange" v-model="selCategory"/>
      </el-form-item>
      <el-form-item label="产品单位：">
        <el-input size="mini" v-model="product.data.unit" style="width:80px"/>*默认赋值到sku内
      </el-form-item>
      <el-form-item label="类型标记：">
        <el-row v-for="(prop,index) in propList" :key="index">
          <el-col :span="2">{{prop.key}}</el-col>
          <el-col :span="4">
            <el-switch v-model="prop.val" active-text="是" inactive-text="否"></el-switch>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="产品属性：">
        <el-button size="mini" @click="addPropertiesBtn">+</el-button>
        <el-row>
          <el-col :span="2">序号</el-col>
          <el-col :span="4">属性名</el-col>
          <el-col :span="4">属性值</el-col>
        </el-row>
        <el-row v-for="(val,index) in properties" :key="index" v-if="properties.length>0">
          <el-col :span="2">{{index+1}}</el-col>
          <el-col :span="4">
            <el-input size="mini" v-model="val.key" style="width:80%"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input size="mini" v-model="val.val" style="width:80%"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button @click="delProp(index)" size="mini" type="text">×</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmBtn(product)">{{product.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newProduct",
    props:['product'],
    data() {
      return {
        categoryList:null,
        properties:[],
        defaultProps: {
          value:'id',
          children: 'childrens',
          label: 'name'
        },
        selCategory:[],
        currCategory:null,
        propList:[{key:'虚拟',val:false,code:'virtual'}],
      }
    },
    created(){
      console.log('———————————————————什么鬼？！—————————————————————————————————————',this.product)

      this.initShow()
      //获取产品类型列表
      this.getProductCategoryList()
      this.makePropsUi(this.product.properties)
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      initShow(){
        if(this.product.data.prop === undefined){
          Vue.set(this.product.data,'prop',{})
        }else {
          this.makeDataUi(this.product.data.prop)
        }
        if(this.product.data.unit === undefined){
          Vue.set(this.product.data,'unit','')
        }
        if(this.product.id){
          this.selCategory=this.product.data.categoryList
          // console.log(this.product.categoryId)
        }
      },
      searchTag(id,array){
        array.forEach(a=>{
          if(a.id === id){
            console.log(a)
            this.product.data.prop={...a.data}
            this.currCategory=a
            this.makeDataUi(this.product.data.prop)
            return
          }else if(a.childrens){
            this.searchTag(id,a.childrens)
          }
        })
      },
      makeDataUi(obj){
        this.propList.forEach(prop=>{
          for(let key in obj){
            if(prop.code === key){
              prop.val=obj[key]
            }
          }
        })
        console.log(this.propList)
      },
      handleChange(e){
        console.log('连级选择事件————————',e)
        this.product.categoryId=e[e.length-1]
        this.searchTag(this.product.categoryId,this.categoryList)
      },
      makePropsUi(properties){
        let tmp = properties.split(';')
        if(tmp.length>0){
          tmp.forEach(t=>{
            let kv={}
            let tmp2=t.split(':')
            if(tmp2[0] && tmp2[1]){
              kv.key=tmp2[0]
              kv.val=tmp2[1]
              this.properties.push(kv)
            }
          })
        }
      },
      getProductCategoryList(){
        this.fetch({name:"getProductCategoryList"})
          .then(res=>{
            console.log(res)
            this.categoryList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmBtn(e){
        let tmp=''
        this.properties.forEach(p=>{
          tmp=tmp+p.key+':'+p.val+';'
        })
        tmp=tmp.substring(0,tmp.length-1)
        this.product.properties=tmp
        this.product.data.categoryList=this.selCategory
        this.product.data.prop=this.propList

        let kv={}
        this.propList.forEach(prop=>{
          kv[prop.code]=prop.val
        })
        this.product.data.prop={...kv}
        console.log('看下单位在里面没？？',this.product)
        // return
        this.$emit('confirm',this.product)
      },
      addPropertiesBtn(){
        this.properties.push({key:'',val:''})
      },
      delProp(index){
        this.properties.splice(index,1)
      },
    }
  }
</script>

<style scoped>

</style>
